<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- react 核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- dom相关库 -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- Es6->Es5 jsx->js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="app"></div>
<!-- 使用JSX，属性使用text/babel -->
<script type="text/babel">

    //1.创建组件
    class Login extends React.Component{
        state = {
            username: '',
            password: ''
        }
        
        saveUsername = (event)=>{
            this.setState({username: event.target.value})
        }
        savePassword = (event)=>{
            this.setState({password: event.target.value})
        }

        handleSubmit = (e)=>{
            e.preventDefault()
            alert(`用户名：${this.state.username}，密码：${this.state.password}`)
        }

        render(){
            return (
                <form action="http://www.atguigu.com" onSubmit = {this.handleSubmit}>
                    用户名：<input onChange={this.saveUsername} name="username" type="text"/>
                    密码：<input onChange={this.savePassword} name="password" type="password"/>
                    <button>登录</button>
                </form>
            )
        }
    }

    

    //渲染组件
    ReactDOM.render(<Login/>, document.getElementById("app"))
</script>
 
</body>
</html>